<template>
  <div class="main">
    <template v-if="address.length > 0">
      <Lists
        v-for="item in address"
        :key="item.id"
        :address="item"
        @click.native="handleSelect(item)"
      />
    </template>
    <template v-else>
      <EmptyTips text="没有收货地址" :image="LocationEmpty" smallText="点击新增按钮可添加"/>
    </template>

    <div class="footer">
      <ActionButton class="blue-btn" text="新增地址" @click="addAddress"/>
    </div>
  </div>
</template>

<script>
import api from "../../api";
import common from "../../api/common";
import EmptyTips from "@/components/common/EmptyTips";
import LocationEmpty from "../../assets/common/location-empty.png";
import ActionButton from "@/components/common/ActionButton";
import Lists from "@/components/address/Lists";
import { constants } from "fs";

export default {
  title: "我的地址",
  components: {
    Lists,
    EmptyTips,
    ActionButton
  },
  data() {
    return {
      uid: this.$store.state.uid,
      LocationEmpty,
      address: [],
      mode: common.getParam("mode"),
      productId: common.getParam("productId"),
      number: common.getParam("number"),
      addressId: ""
    };
  },
  methods: {
    addAddress() {
      if (this.mode) {
        this.$routerPush(
          this,
          `/pages/address/Add?mode=${this.mode}&productId=${
            this.productId
          }&number=${this.number}`
        );
      } else {
        this.$routerPush(this, `/pages/address/Add`);
      }
    },
    getUserAddressList() {
      api.address.getUserAddressList(this.uid, res => {
        console.log(res);
        res.forEach(element => {
          element["radioCheck"] = false;
          this.address.push(element);
        });
      });
    },
    handleSelect(item) {
      if (this.mode != "select") {
        return;
      }

      if (!item.money) {
        this.$toast(`该地址未缴押金，请选择其他地址`);
      } else {
        this.address.forEach(element => {
          element["radioCheck"] = false;
        });
        item["radioCheck"] = true;
        this.addressId = item.id;

        this.$routerPush(
          this,
          `/pages/station/Index?addressId=${this.addressId}&productId=${
            this.productId
          }&number=${this.number}`
        );
      }
    }
  },
  mounted() {
    this.getUserAddressList();
  }
};
</script>

<style lang="less" scoped>
.main {
  margin-bottom: 18vw;
  .footer {
    position: fixed;
    width: 100vw;
    bottom: 0;
  }
}
</style>